{{style_or_link}}



<div class="container" data-{{uuid}}>
    <svg class="chart" data-{{uuid}} preserveAspectRatio="xMinYMin meet"></svg>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/d3/6.7.0/d3.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
    function create(size) {
        function create(g, value) {
            const x = d3.scaleBand()
                .domain(d3.range(1, 11).map((v) => v.toString()))
                .range([0, size.width])
                .paddingOuter(0)
                .paddingInner(0.2);
            const y = d3.scaleBand()
                .domain(d3.range(1, 11).map((v) => v.toString()))
                .range([size.height, 0])
                .paddingOuter(0)
                .paddingInner(0.2);
            const chartData = d3.range(1, 101).map((v) => {
                const x = v % 10;
                const y = Math.floor(v / 10) + 1;
                if (x === 0) {
                    return {
                        data: v,
                        x: 10,
                        y: y - 1,
                    };
                }
                return { data: v, x, y };
            });
            g
                .append("g")
                .attr("class", "y-axis")
                .call(d3.axisLeft(y).tickSizeOuter(0))
                .call((g) => g.selectAll(".tick").remove())
                .call((g) => g.select(".domain").remove());
            g
                .append("g")
                .attr("class", "x-axis")
                .call(d3.axisBottom(x).tickSizeOuter(0))
                .attr("transform", `translate(0,${size.height})`)
                .call((g) => g.selectAll(".tick").remove())
                .call((g) => g.select(".domain").remove());
            const step1 = d3.transition().duration(1000);
            const step2 = step1.transition().duration(1000);
            const step3 = step2.transition().duration(1000);
            const marks = d3.select(g.node())
                .append("g")
                .attr("class", "data")
                .selectAll(".mark")
                .data(chartData)
                .join("circle")
                .attr("r", x.bandwidth() / 2);
            marks.attr('class', d => {
                return "mark";
            });
            marks.transition(step1).attr("cy", (d) => y(d.y) + y.bandwidth() / 2);
            marks.transition(step2).delay((d, i) => {
                return i * 10;
            })
                .attr("cx", (d) => x(d.x) + x.bandwidth() / 2);
            marks.filter(d => d.data <= value).transition(step3).delay((d, i) => {
                return i * 50;
            })
                .attr('class', d => {
                    return "mark mark-full";
                });
        }
        return create;
    }


    const tempArgs = {
        xPorname: '{{x_field_name}}',
        yPorname: '{{y_field_name}}',
        important_field_name: '{{important_field_name}}',
        data: {{ df }},
    };

    // const xPorname = '{{x_field_name}}'
    // const yPorname = '{{y_field_name}}'
    // const data = {{ df }};


    const svg = document.querySelector('svg.chart')


    const x = d3.scaleBand()
        .range([0, 1000])
        .domain(
            _(tempArgs.data)
                .map((d) => d[tempArgs.xPorname])
                .uniq()
                .value()
        )
        .paddingInner(0.2);


    const svgRect = svg.getBoundingClientRect();
    console.log(svgRect);
    const chart_top = svgRect.height / 5

    const builder = create({
        width: x.bandwidth(),
        height: x.bandwidth(),
    });
    // builder(svg.value, 45);

    const svgg = d3.select(svg);

    svgg.append("g")
        .call(d3.axisTop(x))
        .attr("transform", `translate(0,${chart_top})`)
        .call((g) => g.select(".domain").remove())
        .call((g) => g.selectAll(".tick line").remove());

    svgg.selectAll(".w-chart")
        .data(tempArgs.data)
        .join("g")
        .attr("class", "w-charts")
        .attr('class', d => {
            if (d[tempArgs.important_field_name]) {
                return "w-charts-ipt"
            }
            return "w-charts"
        })
        .attr(
            "transform",
            (d) => `translate(${x(d[tempArgs.xPorname])},${chart_top + 10})`
        )
        .call((g) => {
            // builder(g, g.datum.value)
            g.each(function (d) {
                builder(d3.select(this), d[tempArgs.yPorname]);
            });
        });

</script>